// 1. 制作饼形图
function setPie(arr){
    let myChart = echarts.init(document.querySelector('.pie'))
    let option = {
        title: {
            text: '籍贯Hometown',
            textStyle: {
                color: '#6d767e' 
            }
        },
        // 提示框
        tooltip: {
        formatter: '{a} <br />{b} <strong>{c}</strong>人 占比{d}%'
  },
  series: [
    {
      name: '各地学员分布',
      type: 'pie',
      radius: ['10%','60%'],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 4
      },
      data:arr
    }
  ]
    }
myChart.setOption(option)
}
// setPie()

// 2. 制作折线图
function setLine(obj){
  let myChart = echarts.init(document.querySelector('.line'));
    let option = {
       tooltip: {
    trigger: 'axis',
    position: function (pt) {
      return [pt[0], '10%'];
    }
  },
  title: {
    text: '薪资Salary',
    textStyle: {
      color: '#6d767e' 
    }
  },
  legend: {
    show: true
  },
  xAxis: {
    type: 'category',  // 类别
    boundaryGap: false,  // 两侧是否留白
    data: obj.name
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '50%'] // y轴留白会影响最大值和最小值
      },
  //缩放组件
  dataZoom: [
    {
      // inside鼠标滚轮实现缩放，slider通过滑动条实现缩放(默认值)
      type: 'slider',
      start: 0, //起始位置
      end: 20 //结束位置
    },
  ],
  series: [
    {
      name: '期望资薪',
      type: 'line',
      smooth: true,  //转折点是否圆润
      symbol: 'none', // 折点的标记
      itemStyle: {
        color: '#ee6666'
      },
      data:obj.salary
    },
     {
      name: '实际薪资',
      type: 'line',
      smoolh: true,
      symbol: 'none',
      sampling: 'lttb',
      itemStyle: {
        color: '#5470c6'
      },
      data: obj.truesalary
    }
  ]
  }
  myChart.setOption(option)
}
// setLine()

// 3. 制作柱形图
function setBar(obj) {
  let myChart = echarts.init(document.querySelector('.barChart'));
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    grid: {
      top: 30,
      bottom: 30,
      left: '7%',
      right: '7%'
    }, // 网格（整个图表区域设置）
    title: {
      textStyle: {
        color: '#6d767e'
      }
    },
    legend: {},
    xAxis: [
      {
        type: 'category',
        data: obj.group,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: 100,
        interval: 10,
        axisLabel: {
          formatter: '{value} 分'
        }
      },
      {
        type: 'value',
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: '{value} 人'
        }
      }
    ],
    series: [
      {
        name: '平均分',
        type: 'bar',
        barWidth: 15,
        data: obj.avgScore
      },
      {
        name: '低于60分人数',
        type: 'bar',
        barWidth: 15,
        yAxisIndex: 1,
        data: obj.lt60
      },
      {
        name: '60到80分之间',
        type: 'bar',
        barWidth: 15,
        yAxisIndex: 1,
        data: obj.gt60
      },
      {
        name: '高于80分人数',
        type: 'bar',
        barWidth: 15,
        yAxisIndex: 1,
        data: obj.gt80
      }
    ]
  }
  myChart.setOption(option)
}
// setBar()


// 4. 制作地图
function setMap(a,b) {
  let myChart = echarts.init(document.querySelector('.map'))
  // 位置 + 经纬度
 
  // 位置 + 经纬度
  var chinaGeoCoordMap =a
  var chinaDatas =b
  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = chinaGeoCoordMap[dataItem[0].name];
      var toCoord = [116.4551, 40.2539]; // 目标点经纬度（北京顺义校区）
      if (fromCoord && toCoord) {
        res.push([{
          coord: fromCoord,
          value: dataItem[0].value
        }, {
          coord: toCoord,
        }]);
      }
    }
    return res;
  };
  var series = [];
  [['顺义校区', chinaDatas]].forEach(function (item, i) {
    series.push({
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', //箭头图标
        symbolSize: 5, //图标大小
      },
      lineStyle: {
        normal: {
          width: 1, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: 0.2 //尾迹线条曲直度
        }
      },
      data: convertData(item[1])
    }, {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: { //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4 //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        normal: {
          show: true,
          position: 'right', //显示位置
          offset: [5, 0], //偏移设置
          formatter: function (params) {//圆环显示文字
            return params.data.name;
          },
          fontSize: 12
        },
        emphasis: {
          show: true
        }
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 4 + val[2] * 5; //圆环大小
      },
      itemStyle: {
        normal: {
          show: false,
          color: '#f00'
        }
      },
      data: item[1].map(function (dataItem) {
        return {
          name: dataItem[0].name,
          value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
        };
      }),
    },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            offset: [5, 0],
            color: '#9eca7f', // 目标点文字颜色
            formatter: '{b}',
            textStyle: {
              color: "#9eca7f"
            }
          },
          emphasis: {
            show: true,
            color: "#f60", // 目标点鼠标移入的颜色
          }
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [{
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10]),
        }],
      }
    );
  });

  let option = {
    title: {
      text: '来京路线 From',
      textStyle: {
        color: '#6d767e'
      }
    },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          // color: 'rgba(51, 69, 89, .5)', //地图背景色
          // color: '#5a6fc0', //地图背景色
          // borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' //悬浮背景
        }
      }
    },
    series: series
  }
  myChart.setOption(option)
}
setMap()

// 需求1：班级概况
//页面加载后直接发送ajax，渲染页面
axios({
  url:'/student/overview'
}).then(({ data: res }) => {
  document.querySelector('.total').innerHTML = res.data.total
  document.querySelector('.avgSalary').innerHTML = res.data.avgSalary
  document.querySelector('.avgAge').innerHTML = res.data.avgAge
   document.querySelector('.proportion').innerHTML = res.data.proportion
})

// 需求2：柱状图里点击按钮显示隐藏和显示
let btn = document.querySelector('.bar .btn')
let ul = document.querySelector('.bar ul')
btn.onclick = function () {
  // 判断当前盒子是否显示
  if (ul.style.display == 'none') {
    ul.style.display == 'block'
  } else {
   ul.style.display == 'none' 
  }
}

//需求3：柱状图获取a链接绑定点击事件
let as = ul.querySelectorAll('a')
for (let i = 0; i < as.length; i++){
  as[i].onclick = function () {
    // 发送ajax
    axios({
      url: '/score/batch',
      params: {
        batch:i+1
      }
    }).then(({ data: res }) => {
      // 判断业务状态码
      if (res.code == 0) {
        setBar(res.data)
      }
    })
  }
}
// 页面一加载显示第一次成绩
as[0].click()


// 需求4：渲染折线图，饼形图，地图
// 都是要从res中遍历获取指定的数据
axios({
  url: '/student/list'
}).then(({ data: res }) => {
  // 校验业务状态码
  if (res.code == 0) {
    // (1)折线图：定义三个空数组，循环遍历res.data向数组中添加指定的内容
    let line = {
      name: [],
      salary: [],
      truesalary:[]
    }
    // (2)
    let pie = []
    // (3)地图
    let map1 = { '顺义校区': [116.4551, 40.2539] } // 各个地区坐标，需要设置一个默认值
    let map2 = [] //数组包数组包对象

    res.data.forEach(ele => {
      // (1)
      line.name.push(ele.name)
      line.salary.push(ele.salary)
      line.truesalary.push(ele.truesalary)
       
      // (2) 根据条件查询数组中的元素的索引值->查到value++  查不到设置value值为1(添加一个对象)
      let index = pie.findIndex(item => item.name == ele.province) 
      if (index == -1) {
        pie.push({value:1,name:ele.province})
      } else {
         pie[index].value++  //要获取该省份学院对应数组中的索引值
      }

      // (3)
      map1[ele.county] = [ele.jing, ele.wei]
      let i = map2.findIndex(item=>item[0].name==ele.county)
      if (i == -1) {
        map2.push([{name:ele.county,value:1}])
      } else {
        map2[i][0].value++
      }
    })
    // 渲染
    setLine(line)
    setPie(pie)
    setMap(map1, map2)
  }
})


  
  
 